<template>
	<swiper class="swiper-container" :current="index" @change="handleChange">
		<swiper-item v-for="(item,i) in labelList" :key="item._id">
			<view class="swiper-item">
				<ListItem :ArticleList="articleData[index]" :loadData="loadData[index]" @ontolower="handleOntolower">
				</ListItem>
			</view>
		</swiper-item>

	</swiper>
</template>

<script>
	export default {
		name: "ArticleList",
		props: {
			labelList: {
				type: Array
			},
			index: {
				type: Number
			}
		},
		data() {
			return {
				articleData: {},
				loadData: {},
				pageSize: 6
			};
		},
		//初始化数据请求
		created() {
			this.labelList.length && this.getListArticle(this.index)

		},
		watch: {
			//初始化数据请求
			labelList(newVaule, oldVaule) {
				if (JSON.stringify(newVaule) === JSON.stringify(oldVaule)) return
				this.articleData = {}
				this.loadData = {}
				this.getListArticle(this.index)

			}
		},
		methods: {
			//滑动滑块时触发改事件
			handleChange({
				detail
			}) {
				this.$emit("changeCurrent", detail.current)
				if (!this.articleData[detail.current] || !this.articleData[detail.current].length) {
					this.getListArticle(detail.current)
				}

			},
			//数据请求
			async getListArticle(index) {
				//每个页面的当前页数状态
				if (!this.loadData[index]) {
					this.loadData[index] = {
						page: 1,
						pageSize: 6,
						loading: "loading",
						total: 0
					}
				}
				const {
					total,
					articlList
				} = await this.$http.getArticleList({
					classify: this.labelList[index].name,
					page: this.loadData[index].page,
					pageSize: this.pageSize
				});

				this.loadData[index].total = total;

				let oldList = this.articleData[index] || [];

				oldList.push(...articlList)

				this.$set(this.articleData, index, oldList)



			},
			//滚动到底部,加载更多
			handleOntolower() {
				//判断当前页面是否已经全部获取
				if (this.loadData[this.index].total === this.articleData[this.index].length) {
					this.loadData[this.index] = {
						...this.loadData[this.index],
						loading: "no-more"
					};
					this.$forceUpdate() //强制渲染
					return
				}
				//更新下一页
				this.loadData[this.index].page++;
				this.getListArticle(this.index)

			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper-container {
		height: 100%;

		.swiper-item {
			height: 100%;
			overflow: hidden;
		}
	}
</style>
